<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>BIO pages</title>
  <link rel="stylesheet" href="../../bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="bio.css">
</head>
<body>
  <div class="container-fluid">
    <div id="app"></div>
  </div>
  <div class="col-md-12">

  </div>
  <script type="text/x-template" id="page-template">
    <div class = "row">
      <div class="col-md-12 user-block" v-for="user in groupedData">
        <div class="user-top">
          <img :src="user.data[0].avatar">
          <span class="wechat-name">{{user.data[0].name}}</span>
          |
          <span class="real-name">{{user.data[0].real_name}}</span>
        </div>

        <div class="bio-galley">
          <div class="bio-img-item" v-for="bio in user.data">
              <div>{{ bio.created_at }}</div>
              <img class="bio-img" :src="getImgPath(bio)" >
              <ul class="bio-data">
                  <li class="bio-data-item">height : {{ bio.height }} </li>
                  <li class="bio-data-item">weight : {{ bio.weight }} </li>
                  <li class="bio-data-item">chest : {{ bio.chest }} </li>
                  <li class="bio-data-item">waist : {{ bio.waist }} </li>
                  <li class="bio-data-item">hips : {{ bio.hips }} </li>
                  <li class="bio-data-item">arms : {{ bio.arms }} </li>
                  <li class="bio-data-item">thighs : {{ bio.thighs }} </li>
                  <li class="bio-data-item">calfs : {{ bio.calfs }} </li>
                  <li class="bio-data-item">neck : {{ bio.neck }} </li>
                  <li class="bio-data-item">abdominal : {{ bio.abdominal }} </li>
                  <li class="bio-data-item">thigh : {{ bio.thigh }} </li>
                  <li class="bio-data-item">tricep : {{ bio.tricep }} </li>
                  <li class="bio-data-item">suprailiac : {{ bio.suprailiac }} </li>
              </ul>
          </div>
        </div>
      </div>
    </div>
    
  </script>
</body>
<script src="../../assets/js/jquery-2.1.4.min.js"></script>
<script src="../../assets/js/lodash-4.17.4.min.js"></script>
<script src="../../assets/js/vue-2.5.2.js"></script>
<script src="../../assets/js/vuex-3.0.0.js"></script>
<script src="bio-data.js"></script>
<script src="bio.js"></script>
</html>